<template>
  <div class="layui-layout layui-layout-admin zlgj-page" >

    <div class="adminnav2">
     <Secondnav urlname="kehu"></Secondnav>
    </div>
    <!-- 主体内容 -->
      <div class="viewport01"></div>
      <div class="layui-body kedou-admin" id="LAY_app_body">
        <div class="layui-fluid">
          <div class="layui-row layui-col-space15">
            <div class="layui-fluid" style="margin-top:-15px;">
              <div class="layui-card">
                 <div class="layui-card-header">客户概况(关注公众号的客户，进入小程序商城的用户、添加导购企业微信的客户，都统称为客户)</div>
                   <div class="layui-card-body">
                      <div class="layui-carousel layadmin-carousel layadmin-backlog" style='height:auto!important'>
                        <div>
                          <ul class="layui-row layui-col-space10">
                            <li class="layui-col-xs3">
                              <a lay-href="app/content/comment.html" class="layadmin-backlog-body">
                                <h3>昨日新增(人)</h3>
                                <p><cite>{{itemData.customerProfile.newYesterday}}</cite></p>
                              </a>
                            </li>
                            <li class="layui-col-xs3">
                              <a lay-href="app/forum/list.html" class="layadmin-backlog-body">
                                <h3>客户总数(人)</h3>
                                <p><cite>{{itemData.customerProfile.total}}</cite></p>
                              </a>
                            </li>

                            <li class="layui-col-xs3">
                              <a href="javascript:;"  class="layadmin-backlog-body">
                                <h3>进入小程序商城客户数(人)</h3>
                                <p><cite>{{itemData.customerProfile.mallCustomers}}</cite></p>
                              </a>
                            </li>
                            <li class="layui-col-xs3">
                              <a href="javascript:;"  class="layadmin-backlog-body">
                                <h3>近30天有消费客户数(人)</h3>
                                <p><cite>{{itemData.customerProfile.consumption}}</cite></p>
                              </a>
                            </li>
                          </ul>

                        </div>
                      </div>
                   </div>
                 </div>

                 <div class="layui-row layui-col-space15">
                   <div class="layui-col-md4">
                      <div class="layui-card">
                       <div class="layui-card-header">客户转化(人数)</div>
                       <div class="layui-card-body">
                          <div id="ptb01" class="kehutb"></div>
                       </div>
                      </div>
                   </div>
                   <div class="layui-col-md4">
                      <div class="layui-card">
                       <div class="layui-card-header">客户来源</div>
                       <div class="layui-card-body">
                         <div id="ptb02" class="kehutb"></div>
                       </div>
                      </div>
                   </div>
                   <div class="layui-col-md4">
                      <div class="layui-card">
                       <div class="layui-card-header">消费次数</div>
                       <div class="layui-card-body">
                         <div id="ptb03" class="kehutb"></div>
                       </div>
                      </div>
                   </div>
                   <div class="layui-col-md4">
                      <div class="layui-card">
                       <div class="layui-card-header">客户性别</div>
                       <div class="layui-card-body">
                         <div id="ptb04" class="kehutb"></div>
                       </div>
                      </div>
                   </div>
                   <div class="layui-col-md4">
                      <div class="layui-card">
                       <div class="layui-card-header">会员等级</div>
                       <div class="layui-card-body">
                         <div id="ptb05" class="kehutb"></div>
                       </div>
                      </div>
                   </div>
                   <div class="layui-col-md4">
                      <div class="layui-card">
                       <div class="layui-card-header">购买客户地域分布(前5名)</div>
                       <div class="layui-card-body">
                         <div id="ptb06" class="kehutb"></div>
                       </div>
                      </div>
                   </div>
                </div>
            </div>
          </div>
        </div>
  		</div>	　
  </div>
</template>
<script>
  import echarts from 'echarts'
  import Pagetop from '../common/pagetop.vue'
  import Secondnav from '../common/zlgjsecondnav.vue'
export default {
  name: 'kehu',
  components: {Pagetop,Secondnav},
  data () {
    return {
      itemData:{customerProfile:''}
    }
  },
  mounted(){
    this.getdate();

  },
  methods: {
    getdate:function(){
    	var url='/salesreport/aapi/v1.9/pedestrian-street/customer/system';
    	var _this=this;
    	ajaxRequest(url,'GET','json','',function(ret,err){
    		_this.itemData=ret.data;
      	_this.getptb01();
      	_this.getptb02();
      	_this.getptb03();
      	_this.getptb04();
      	_this.getptb05();
      	_this.getptb06();
    	})

    },
    getptb01:function(){
      var res=this.itemData.customerTransformation;
      var arr1=[]
      var arr2=['进入商城人数','提交订单人数','成功支付人数'];
      for(var i=0;i<arr2.length;i++){
        var obj={};
        obj.name=arr2[i];
        if(i==0){
          obj.value=res.enterTheMall
        }
        else if(i==1){
          obj.value=res.placeOrder
        }
        else{
          obj.value=res.payment
        }
        arr1.push(obj)
      }
      var option = {
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c}%"
          },
          legend: {
              textStyle:{
                  color:"#b0c5e4"
              },
              data: ['进入商城人数','提交订单人数','成功支付人数']
          },

          series: [
              {
                  name:'漏斗图',
                  type:'funnel',
                  left: '0%',
                  top: 60,
                  bottom: 60,
                  width: '100%',
                  min: 0,
                  max: 100,
                  minSize: '0%',
                  maxSize: '100%',
                  sort: 'descending',
                  gap: 2,
                  label: {
                      show: true,
                      position: 'inside'
                  },
                  labelLine: {
                      length: 10,
                      lineStyle: {
                          width:0,
                          type: 'solid'
                      }
                  },
                  itemStyle: {
                      borderWidth:0
                  },
                  emphasis: {
                      label: {
                          fontSize: 20
                      }
                  },

                  data:arr1
              }
          ]
      };
      var myChart = echarts.init(document.getElementById('ptb01'))
      myChart.setOption(option);
    },
    getptb02:function(){
      var res=this.itemData.sourceList;
      var arr1=[]
      for(var i=0;i<res.length;i++){
        var obj={};
        obj.name=res[i].name;
        obj.value=res[i].proportion
        arr1.push(obj)
      }
      var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            left: 10,
            textStyle:{
                color:"#b0c5e4"
            },
            data: ['商城链接', '领会员卡', '领优惠券', '导购推荐', '其他']
        },

        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },

                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                 itemStyle:{
								        normal:{
								        	 label:{
								              show: true,
								              formatter: '{b} : {c} ({d}%)'
								           },
								           labelLine :{show:true},

								        }
								  },
                data: arr1
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('ptb02'))
    myChart.setOption(option);
    },
    getptb03:function(){
      var res=this.itemData.timesList;
      var arr1=[]
      for(var i=0;i<res.length;i++){
        var obj={};
        obj.name=res[i].name;
        obj.value=res[i].proportion
        arr1.push(obj)
      }
      var option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
              orient: 'horizontal',
              left: 10,
              textStyle:{
                  color:"#b0c5e4"
              },
              data: ['支付0次', '支付1-2次', '支付3-4次', '支付5次以上']
          },

          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: ['50%', '60%'],
                  avoidLabelOverlap: false,
                  label: {
                      show: false,
                      position: 'center'
                  },

                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data: [
                      {value: 1548, name: '支付0次'},
                      {value: 310, name: '支付1-2次'},
                      {value: 234, name: '支付3-4次'},
                      {value: 135, name: '支付5次以上'}
                  ],
                  itemStyle: {

                        normal:{
                        		label:{
								              show: true,
								              formatter: '{b} : {c} ({d}%)'
								           },
								           labelLine :{show:true},
                            color:function(params) {
                            var colorList = [
                                    '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                                ];
                                return colorList[params.dataIndex]
                             }
                        }
                  }
              }
          ]
      };
      var myChart = echarts.init(document.getElementById('ptb03'))
      myChart.setOption(option);
    },
    getptb04:function(){
      var res=this.itemData.sexList;
      var arr1=[]
      for(var i=0;i<res.length;i++){
        var obj={};
        obj.name=res[i].name;
        obj.value=res[i].proportion
        arr1.push(obj)
      }
      var option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
              orient: 'horizontal',
              left: 10,
              textStyle:{
                  color:"#b0c5e4"
              },
              data: ['男', '女', '未知']
          },

          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: ['50%', '60%'],
                  avoidLabelOverlap: false,
                  label: {
                      show: false,
                      position: 'center'
                  },

                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data: arr1,
                  itemStyle: {

                        normal:{
                        	label:{
								              show: true,
								              formatter: '{b} : {c} ({d}%)'
								           },
								           labelLine :{show:true},
                            color:function(params) {
                            var colorList = [
                                    '#9ac200', '#E33E33', '#3385ff'
                                ];
                                return colorList[params.dataIndex]
                             }
                        }
                  }
              }
          ]
      };
      var myChart = echarts.init(document.getElementById('ptb04'))
      myChart.setOption(option);
    },
    getptb05:function(){
      var res=this.itemData.memberList;
      var arr1=[]
      for(var i=0;i<res.length;i++){
        var obj={};
        obj.name=res[i].name;
        obj.value=res[i].proportion
        arr1.push(obj)
      }
      var option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
              orient: 'horizontal',
              left: 10,
              textStyle:{
                  color:"#b0c5e4"
              },
              data: ['非会员', '普通会员', '高级别会员']
          },

          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: ['50%', '60%'],
                  avoidLabelOverlap: false,
                  label: {
                      show: false,
                      position: 'center'
                  },

                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data:arr1,
                  itemStyle: {

                        normal:{
                        	label:{
								              show: true,
								              formatter: '{b} : {c} ({d}%)'
								           },
								           labelLine :{show:true},
                            color:function(params) {
                            var colorList = [
                                    'red', 'orange', 'yellow'
                                ];
                                return colorList[params.dataIndex]
                             }
                        }
                  }
              }
          ]
      };
      var myChart = echarts.init(document.getElementById('ptb05'))
      myChart.setOption(option);
    },
    getptb06:function(){
      var res=this.itemData.cityRankTop.cityRank;
      var arr1=[]
      var arr2=[];
      var arr3=[];
      for(var i=0;i<res.length;i++){
        arr1.push(res[i].cityName)
        var v=res[i].counts>10000?10000:res[i].counts
        arr2.push(v)
        var obj={};
        obj.text=res[i].cityName;
        obj.max=10000;
        arr3.push(obj)
      }
      if(arr3.length==0){
        arr3= [
                      {text: '杭州市', max: 100},
                      {text: '宁波市', max: 100},
                      {text: '温州市', max: 100},
                      {text: '金华市', max: 100},
                      {text: '绍兴市', max: 100}
                  ]
      }
      var option = {

          tooltip: {
              trigger: 'axis'
          },
          legend: {
              left: 'center',
              textStyle:{
                  color:"#b0c5e4"
              },
              data: arr1
          },
          radar: [
              {
                  indicator:arr3,
                  radius: 80,
                  center: ['50%', '60%'],
              },

          ],
          series: [
              {
                  type: 'radar',
                  tooltip: {
                      trigger: 'item'
                  },
                  areaStyle: {},
                  data: [
                      {
                          value:arr2,
                          name: '地域'
                      }
                  ]
              }
          ]
      };
      var myChart = echarts.init(document.getElementById('ptb06'))
      myChart.setOption(option);
    }
  },
  updated:function(){

  },
}
</script>
<style>
  @import '../../../static/other/css/zlgj/index.css'
</style>
